<template>
  <div>
    <form @submit.prevent="register">
    <input type="text" v-model="name" placeholder="昵称" maxlength='16' class='nickName'>
    <input type="text" v-model="account" placeholder="账号" maxlength='16' class='account'>
    <input type="password" v-model="pwd" placeholder="密码" maxlength='16' class='pwd'>
    <input type="submit" class='submit' value='注册'>
  </form>
  <AlterTip @closeTip='closeTip' :alertText='alertText' v-show='showAlert'></AlterTip>
  </div>
</template>

<script>
  import axios from 'axios'
  import AlterTip from '../alertTip/AlertTip.vue';
  export default {
    data(){
      return {
        name: '',
        account:'',
        pwd:'',
        alertText: '',
        showAlert: false
      }
    },
    components: {
      AlterTip
    },
      methods: {
      register(){
        const {name, account,pwd} = this
        if(!name){
          this.showAlert = true
          this.alertText = '请输入用户名'
        }else if(!account){
          this.showAlert = true
          this.alertText = '请输入账号'
        }else if(!pwd){
          this.showAlert = true
          this.alertText = '请输入密码'
          return
        }
        console.log('注册成功')


      },
      closeTip(){
        this.showAlert = false
        this.alertText = ''
      }
    }
  }
</script>

<style scoped>
form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
form .account,form .nickName,form .pwd {
  width: 60%;
  height: 30px;
  margin-top: 15px;
  border: none;
  outline: none;
  border-bottom: 2px solid #397;
}
.submit {
  width:80px;
  height: 25px;
  border-radius: 5px;
  border: none;
  outline: none;
  margin-top: 20px;
  background: #397;
  color: #eee;
}
.submit:hover {
  color: #fff;
  cursor: pointer;
}
</style>
